Skip to main content

How SDK Works

The SDK is a tool to integrate your custom chart with ThoughtSpot, allowing you to incorporate features of your chart as well as features provided by ThoughtSpot.

To work with the SDK, you need to understand how it integrates with ThoughtSpot and the flow of events exchanged between the SDK and ThoughtSpot after integration.

How SDK Integrates with ThoughtSpot​

To understand the integration of the SDK with ThoughtSpot, we will take a look at the data flow diagram given below:

data-flow

Let's break this data flow into the following steps:

  1. Interacting with Admin UI (adding chart and whitelisting the chart URL)
  2. Interacting with the Answer UI (event exchange between SDK and ThoughtSpot)

1. Interacting with Admin UI (Adding Chart and Whitelisting the Chart URL)​

This is the first step involved in integrating the SDK with ThoughtSpot and making TS aware of the chart you are using. This involves steps like providing metadata for the chart, which can be seen here, and whitelisting the chart URL in the TS cluster with the tscli flag.

For whitelisting the chart URL, you need to run the following TS cluster command:

  • For whitelisting the URL of the chart:

    tscli --adv csp add-override --source 'frame-src' --url <your-chart-url>

  • For whitelisting the image URL of your chart:

    tscli csp add-override --source img-src --url <your-chart-image-url>

2. Interacting with the Answer UI (Event Exchange Between SDK and ThoughtSpot)​

After you are done with the Admin UI, you can create an answer, and inside the chart selector, you can select the custom chart that you have added. This will trigger a series of events between the SDK and ThoughtSpot through the postMessage bridge.

The initial flow starts with the initStart event, which is the first event sent by your chart if you have the SDK in it, and ends with the initializeComplete event. After this, you can send your own events based on the scenarios you are dealing with. The general flow will look like this:

data-flow

The above was the general flow of how the postMessage bridge works with TS and the SDK. The general flow is that the TS component will send a request to postMessage with the componentId and the object value that needs to be sent to the SDK, and postMessage will send that event to the custom chart, process the event, and send the acknowledgment back to the TS component via postMessage.

Now, let's see the flow of events in the first render of the chart on the viz canvas.

data-flow